<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { getsystem } from '@/api/echarts'
export default {
  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    }
  },
  created() {
    getsystem().then(res => {
      this.normalEquipment = res.msg.normalEquipment
      this.alarmEquipment = res.msg.alarmEquipment
      this.offlineEquipment = res.msg.offlineEquipment
      this.faultEquipment = res.msg.faultEquipment
      this.unableEquipment = res.msg.unableEquipment
      this.getEchartRight();
    })
  },
  methods: {
  getEchartRight() {
    let myChart = echarts.init(document.getElementById('chart_right2'));
    let option = {
      color: ['#00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00', '#FFAD05', '#4465fc'],
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      polar: {},
      angleAxis: {
        interval: 1,
        type: 'category',
        data: [],
        z: 10,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0B4A6B',
            width: 5,
            type: 'solid'
          },
        },
        axisLabel: {
          interval: 0,
          show: true,
          color: '#0B4A6B',
          margin: 8,
          fontSize: 16
        },
      },
      radiusAxis: {
        min: 40,
        max: 120,
        interval: 20,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0B3E5E',
            width: 1,
            type: 'solid'
          },
        },
        axisLabel: {
          formatter: '{value} %',
          show: false,
          padding: [0, 0, 20, 0],
          color: '#0B3E5E',
          fontSize: 16
        },
        splitLine: {
          lineStyle: {
            color: '#0B3E5E',
            width: 2,
            type: "solid"
          }
        }
      },
      calculable: true,
      series: [{
        stack: 'a',
        type: 'pie',
        radius: ['20%', '80%'],
        roseType: 'area',
        zlevel: 10,
        minAngle: 10,  // 设置最小角度为10度
        label: {
          normal: {
            show: true,
            formatter: '{b}: {c}', // Display category name and value
            textStyle: {
              fontSize: 15,
            },
            position: 'outside'
          },
          emphasis: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: true,
            length: 15,
            length2: 50,
            lineStyle: {
              type: 'dotted'
            }
          },
          emphasis: {
            show: true
          }
        },
        data: [{
          value: this.normalEquipment,
          name: '正常'
        }, {
          value: this.alarmEquipment,
          name: '报警'
        }, {
          value: this.offlineEquipment,
          name: '离线'
        }, {
          value: this.faultEquipment,
          name: '故障'
        }, {
          value: this.unableEquipment,
          name: '未启用'
        }]
      }]
    }

    myChart.setOption(option, true);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  },
}

};
</script>

<style lang="scss" scoped>
.distribution-container {
  .chart {
    height: 3rem;
  }
}
</style>
